<template>
  <v-col class="mt-2">
    <v-col class="top">
      <v-row justify="center" align="center">
        <v-col class="text-center">
          <div class="main-head">关于我们</div>
          <div class="main-subhead">What is Banzhuan Inc.</div>
        </v-col>
      </v-row>
    </v-col>
    <v-col class="med">
      <div class="med-main px-10 py-14">
        <div class="">
          <div class="med-subtitle">我们的使命</div>
          <div class="med-content">
            我们旨在建立一个服务开发者的生态系统，在这个生态系统中，我们将品牌、流量、变现能力赋予开发者，帮助开发者创造出影响世界的新技术。
          </div>
        </div>
        <div>
          <div class="med-subtitle">我们的愿景</div>
          <div class="med-content">
            <ul>
              <li>让开发者成为一个令人尊敬的职业</li>
              <li>创立一个伟大的开源基金会</li>
              <li>引领中国未来百年的开发者文化</li>
            </ul>
          </div>
        </div>
      </div>
    </v-col>
    <v-col class="down">
      <div class="down-main">
        <div class="down-title text-h5 font-weight-bold">凡是创造，皆是作品</div>
        <div class="down-logo"><img src="/ban.png" alt="" /></div>
        <div class="down-sign">我们珍视的价值观</div>
        <div class="down-sign">可靠 / 精进 / 包容 / 开放 / 创新</div>
      </div>
    </v-col>
    <v-col class="footer">

        <v-row class="footer-main" justify="center">
            <v-col cols="12" xl="4" lg="4" md="4" sm="3">
                <v-col class="text-h6 white--text font-weight-bold">官方账号</v-col>
                <v-col class="py-0">微博</v-col>
                <v-col class="py-0">GitHub</v-col>
                <v-col class="py-0">知乎专栏</v-col>
                <v-col class="py-0">简书</v-col>
            </v-col>
            <v-col cols="12" xl="4" lg="4" md="4" sm="3">

                <v-col class="text-h6 white--text font-weight-bold">微信公众号</v-col>
                <v-col class="py-0">
                    <v-img src="https://xitu.juejin.cn/images/wechat.jpg" max-height="100" max-width="100"></v-img>
                </v-col>
            </v-col>
            <v-col cols="12" xl="4" lg="4" md="4" sm="3">
                <v-col class="text-h6 white--text font-weight-bold">联系方式</v-col>
                <v-col class="py-0">邮箱：hi@xitu.io</v-col>
                <v-col class="py-0">商务：bd@xitu.io</v-col>
                <v-col class="py-0">招聘：hr@xitu.io</v-col>
                <v-col class="py-0">地址：北京市朝阳区望京SOHO塔1C座2705</v-col>
                <v-col class="py-0">资源：Press Kit</v-col>
            </v-col>
        </v-row>
    </v-col>
  </v-col>
</template>

<script>
export default {}
</script>

<style>
.top {
  padding: 50px 30px;
  background-color: white;
}
.main-head {
  font-size: 2rem;
  font-weight: bold;
}
.main-subhead {
  font-size: 1.1rem;
  color: #999;
  letter-spacing: 1px;
}
.med {
  background-color: #fafafa;
}
.med-main {
  box-sizing: border-box;
}
.med-subtitle {
  font-size: 2rem;
  font-weight: bold;
}
.med-content {
  font-size:0.8rem;
  color: #999;
  margin-top: 10px;
}
.down {
  background-color: white;
}
.down-main {
  padding: 50px 0;
  box-sizing: border-box;
  text-align: center;
}

.down-logo {
  margin: 24px 0;
}
.down-sign {
  font-size: 1rem;
  color: #999;
}
.footer{
    background-color: #333333;
    color: #9c9c9c;

}
.footer-main{
        padding: 50px 30px;
    box-sizing: border-box;
}
</style>
